<template>
  <view class="garden-page">
    <NavBar title="动态" :left-arrow="false" />
    <view class="garden-content">
      <view class="garden-card" v-for="item in graphicData" :key="item.id">
        <TnGraphicCard
          :avatar="item.avatar"
          :title="item.title"
          :description="item.description"
          :content="item.content"
          :images="item.images"
          :comment-count="item.commentCount"
          :like-count="item.likeCount"
          :show-hot="false"
          :show-more="false"
          @click="goDetail"
          @comment-click="commentClick"
          @like-click="hotClick(item.title)"
        />
      </view>
    </view>
    <TabBar active="garden" />
  </view>
</template>

<script setup>
import TabBar from "@/components/TabBar.vue";
import NavBar from "@/components/NavBar.vue";
import TnGraphicCard from "tnuiv3p-tn-graphic-card/index.vue";
import { useToast } from "wot-design-uni";
const toast = useToast();
const graphicData = [
  {
    id: 1,
    avatar: "https://resource.tuniaokj.com/images/album/xiong1.jpg",
    title: "文章标题",
    description: "2023年6月30日",
    // tags: ["标签1", "标签2"],
    content:
      "看看打开打开年份记得当年开始放假哦额外欺 骗人，可能打飞机哦喷泉哦怕可能地方打开螺丝粉年份的肌肤看能否。",
    images: [
      "https://resource.tuniaokj.com/images/album/xiong1.jpg",
      "https://resource.tuniaokj.com/images/album/xiong1.jpg",
    ],
    commentCount: 101,
    likeCount: 102,
  },
  {
    id: 2,
    avatar: "https://resource.tuniaokj.com/images/album/xiong1.jpg",
    title: "文章标题",
    description: "2023年6月30日",
    // tags: ["标签1", "标签2"],
    content:
      "sadnsandsjdnasj asdjasjndjsan nasjndsjndasjn njansjdnsaoiwqiwq nansdjsa",
    images: [
      "https://resource.tuniaokj.com/images/album/xiong1.jpg",
      "https://resource.tuniaokj.com/images/album/xiong1.jpg",
    ],
    commentCount: 101,
    likeCount: 102,
  },
];
const goDetail = () => {
  toast.success("查看详情");
};
const commentClick = () => {
  toast.success("评论");
};
const hotClick = (title) => {
  toast.success(`给 ${title} 点赞`);
};
</script>

<style lang="scss" scoped>
.garden-content {
  gap: 12px;
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  .garden-card {
    border-radius: 10px;
    background-color: #fff;
  }
}
:global(.tn-graphic-card) {
  box-sizing: border-box !important;
}
</style>
